<template>
  <div>
    <h1>1. ref 和 $refs 获取原生 DOM 对象</h1>
    <h2 ref="title">好兄弟卖腰子</h2>
    <button @click="getH2">获取h2</button>

    <h1>2. ref 和 $refs 获取 组件 对象</h1>
    <Demo ref="de" />
    <button @click="getDemo">获取组件</button>
  </div>
</template>

<script>
import Demo from "./components/Demo.vue";
export default {
  components: {
    Demo,
  },
  data() {
    return {};
  },
  methods: {
    getH2() {
      console.log(this.$refs.title);
    },
    getDemo() {
      console.log(this.$refs.de);
      console.log(this.$refs.de.msg);
      this.$refs.de.abc();
    },
  },
};
</script>

<style scoped>
</style>